import {useState,useEffect} from 'react'
import {useParams,useNavigate} from 'react-router-dom'
import {connect} from 'react-redux'
import {List,Input,Grid,Swiper,NavBar} from 'antd-mobile'
import {reqReadmsg} from '../../api/'
import './index.scss'
import {splitArr} from '../../utils'
import {sendMsg,reads} from '../../store/actions/chatmsg'
function Chat (props) {
    let  emojis = ['😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀'
    ,'😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣'
    ,'😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣'
    ,'😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣']
    emojis= splitArr(emojis,32)
    const params=useParams()
    const {userInfo,chat,reads}=props
    console.log(props)
    const[value,setValue]= useState('')
    const[show,setShow]= useState('') 
    const[toUesr,setToUser]=useState('')
   
    const nav=useNavigate()
    const chatId = [params.id, userInfo._id].sort().join('_')
    const chatlist =  chat.chatMsgs.filter(msg => msg.chat_id===chatId)
    useEffect(()=>{
       
        // reqChatList().then((response)=>{
        //         const chatId = [params.id, userInfo._id].sort().join('_')
        //         // 对chatMsgs进行过滤
        //         const msgs =  response.data.chatMsgs.filter(msg => msg.chat_id===chatId)
        //         // const list=  response.data.chatMsgs.filter((item)=>{
        //         //     if(item.from==params.id&&item.to==userInfo._id){
        //         //         return item
        //         //     } 
        //         //     if(item.from==userInfo._id&&item.to==params.id){
        //         //         return item
        //         //     } 
        //         //     return null
        //         // })
        //         setChatlist(msgs)
        //         setToUser(response.data.users[params.id])
        //         window.scrollTo(0, document.body.scrollHeight)
        //     }
        // )
        
        setToUser(chat.users[params.id])
        window.scrollTo(0, document.body.scrollHeight)
        return ()=>{
             //修改消息为已读
             reqReadmsg(params.id) 
             reads({to:userInfo._id,from:params.id})
        }
    },[userInfo._id,params.id])
      //发送消息
     const handleSend=()=>{
        console.log('发送消息到服务端')
        sendMsg({from:userInfo._id,to:params.id,content:value})
        setValue('')
        // reqChatList().then((response)=>{
        //     const chatId = [userInfo._id, params.id].sort().join('_')
        //         // 对chatMsgs进行过滤
        //     const msgs =  response.data.chatMsgs.filter(msg => msg.chat_id===chatId)
        //     setChatlist(msgs)
        //     window.scrollTo(0, document.body.scrollHeight)
        // })
       
        window.scrollTo(0, document.body.scrollHeight)
      }
        return (
            <div className="chat"> 
                <NavBar className="navbar" onBack={()=>{nav(-1)}}>{params.name}</NavBar>
                <List className='chat_msg'>
                   {chatlist.map((item)=>{
                       if(userInfo._id===item.to){
                            return (<List.Item prefix={<img style={{width:'22px'}} src={toUesr?require(`../../assets/images/${toUesr.header}.png`).default:''} alt=""></img>}  key={item._id}>{item.content}</List.Item>)
                       }else{
                        return (<List.Item  key={item._id}  extra={<img style={{width:'22px'}} src={require(`../../assets/images/${userInfo.header}.png`).default} alt=""></img>}> <div style={{textAlign:'right'}}>{item.content} </div></List.Item>)
                       }
                   })}
                </List>

                <List className="chat_window">
                    <List.Item
                    extra={
                        <span>
                            <span onClick={()=>{setShow(!show)}}>😊</span>
                            <span style={{color:'#888',fontSize:'15px',marginLeft:'10px'}}
                            onClick={handleSend}
                            >发送</span>
                        </span>                       
                    }
                    >
                        <Input placeholder="请输入" 
                        onChange={(value)=>{setValue(value)}}
                         value={value} 
                        >
                        </Input>
                    </List.Item>
                    {show?<Swiper>
                        {
                            emojis.map((arry,index)=>{
                            return(
                                <Swiper.Item key={index+"arry"}>
                                    <Grid columns={8}>
                                        {
                                            arry.map((item,index)=>{
                                                return(<div 
                                                    style={{textAlign:'center',height:'12.4vw',lineHeight:'12.4vw',fontSize:'12px'}}
                                                     key={index}
                                                     onClick={()=>{setValue(value+item)}}
                                                     >{item}</div>)
                                            })
                                        }
                                    </Grid>
                                </Swiper.Item>
                            )
                            })
                            
                        }
                      
                        
                    </Swiper>
                    :''
                    }
                </List>
            </div>
        )
}
export default connect(state=>({userInfo:state.userInfo.info,chat:state.chat}),{
    reads
}
)(Chat)